<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<a href="./home.html">首页</a>
<a href="https://www.baidu.com/">百度</a>

<button class="btn2">后退</button>
<button class="btn1">前进</button>

<script>
// history对象，包含有关浏览器历史记录
console.log( history );// {...}

console.log( history.length );// 2 返回当前窗口浏览记录条数

var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');

btn1.onclick = function (){
    // 前进 ->
    // history.forward();

    // 跳转到指定历史记录 0当前页  -1上一页  1下一页
    // history.go(1);// 下一页
    history.go(-1);// 上一页
}

btn2.onclick = function (){
    // 后退 <-
    history.back();
}


// 下面的内容目前了解即可（vue2路由实现原理）
// history.pushState() 向浏览器历史记录中添加一条记录
// history.replaceState() 替换浏览器历史记录中的某一条记录
// window.onpopstate = function (){} 浏览器url地址栏发生变化时触发popstate事件


// 练习：由a页面跳转到b页面，倒计时5秒后，返回上一页（点击立即返回）

</script>
</body>
</html>